<template>
    <el-container style="border: solid 1px #5d7db3; margin: 35px;">
        <el-header>
            <div class="header">
                <h2>{{ topic }}</h2>
                <p>发布日期：{{ formatDate(publishTime) }} &nbsp;&nbsp; 点击量：[ {{ clickNum }} ]</p>
            </div>
        </el-header>
        <el-main>
            <div v-html="content" class="ql-editor"></div>
        </el-main>
    </el-container>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            topic: '',
            publishTime: '',
            clickNum: '',
            content: '',
        };
    },
    created() {
        this.fetchArticle();
    },
    methods: {
        formatDate(dateTimeString) {
            if (dateTimeString) {
                const parts = dateTimeString.split('T');
                return parts[0];
            }
        },
        fetchArticle() {
            const articleId = this.$route.params.articleId;
            axios.get(`/article/findByArtId/${articleId}`)
                .then(response => {
                    if (response.data.code === 200) {
                        console.log(response.data.data.content)
                        this.topic = response.data.data.topic;
                        this.publishTime = response.data.data.publishTime;
                        this.clickNum = response.data.data.clickNum.toString();
                        this.content = response.data.data.content.replace(/<p(\s[^>]*)?>/g, '<p style="text-indent: 2em;"$1>'); 
                    } else {
                        console.error('获取文章数据时出错:', response.data.msg);
                    }
                })
                .catch(error => {
                    console.error('Error fetching article data:', error);
                });
        },
    }
}  
</script>
<style scroped>
.header h2 {
    color: rgb(3, 73, 144);
    text-align: center;
}

.header p {
    background-color: rgb(246, 246, 246);
    text-align: center;
    height: 35px;
    line-height: 35px;
    margin-top: 20px;
}

.ql-editor {
    margin-top: 20px;
    padding: 12px 0px !important;
}

.ql-editor p {
    letter-spacing: 1px;
    line-height: 25px;
}

.ql-editor img {
    width: 600px;
    height: 400px;
    justify-content: center;
    align-items: center;
}
</style>